<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-07-26 11:02:44
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-08-05 16:26:06
-->
<template>
  <div class="add3DTilesData">
    <div id="cesiumContainer"></div>
    <div class="list">
      <ul>
        <li @click="addData1">数据1</li>
        <li @click="addData2">定位到纽约</li>
        <li @click="addPlaneModel">飞机模型</li>
        <li @click="addMilkTruck">小汽车模型</li>
        <li @click="addData3">定位到陆家嘴</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Add3DTilesData",
  data() {
    return {
      viewer: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        shouldAnimate: true,
        // infoBox: true,
        terrainProvider: new Cesium.CesiumTerrainProvider({
          url: Cesium.IonResource.fromAssetId(1),
          // 增加水面特效
          requestWaterMask: true,
          // 增加法线，用于提高光照效果
          requestVertexNormals: true,
        }),
      });
      //   去掉版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
    },
    addData1() {
      var tiles = this.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({ url: "./data/Tileset/tileset.json" })
      );
      this.viewer.flyTo(tiles);
    },
    addData2() {
      // Load the NYC buildings tileset  纽约的模型数据有高度，陆家嘴的没有，所以不能设置颜色
      const tileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(75343),
      });
      this.viewer.scene.primitives.add(tileset);
      this.viewer.flyTo(tileset);
      // 设置模型根据不同高度显示不同颜色
      tileset.style = new Cesium.Cesium3DTileStyle({
        color: {
          conditions: [
            ["${Height} >= 300", 'color("yellow", 0.5)'],
            ["${Height} >= 200", 'color("red", 0.5)'],
            ["${Height} >= 100", 'color("purple", 0.5)'],
            ["${Height} >= 50", "rgb(198,106,11)"],
            ["true", 'color("blue")'],
          ],
        },
        show: "${Height} > 0",
        meta: {
          description: '"Building id ${id} has height ${Height}."',
        },
      });
    },
    addPlaneModel() {
      const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 1500);
      const hpr = new Cesium.HeadingPitchRoll(-90, 0, 0);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );
      const entity = this.viewer.entities.add({
        position: position,
        orientation: orientation,
        model: {
          uri: "./data/models/CesiumAir/Cesium_Air.glb",
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      });
      // viewBoundingSphere第一个参数用于设置视点的位置；第二个参数设置相机的朝向
      this.viewer.camera.viewBoundingSphere(
        new Cesium.BoundingSphere(position, 20),
        new Cesium.HeadingPitchRange(0, 0, 0)
      );
    },
    addData3() {
      const tileset = new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(96188),
      });
      this.viewer.scene.primitives.add(tileset);

      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(121.49, 31.23, 3000),
        // 方向
        orientation: {
          heading: 0,
          pitch: 0,
          roll: 0,
        },
      });
    },
    addMilkTruck(){
      const position = Cesium.Cartesian3.fromDegrees(120, 50, 1500);
      const hpr = new Cesium.HeadingPitchRoll(135, 0, 0);
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );
      const entity = this.viewer.entities.add({
        position: position,
        orientation: orientation,
        model: {
          uri: "./data/models/CesiumMilkTruck/CesiumMilkTruck.glb",
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      });
      // viewBoundingSphere第一个参数用于设置视点的位置；第二个参数设置相机的朝向
      this.viewer.camera.viewBoundingSphere(
        new Cesium.BoundingSphere(position, 20),
        new Cesium.HeadingPitchRange(0, 0, 0)
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.add3DTilesData {
  position: relative;
  #cesiumContainer {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0px;
    overflow: hidden;
  }
  .list {
    position: absolute;
    top: 1rem;
    ul {
      color: rgb(248, 240, 92);
      li {
        background: rgb(144, 213, 248);
        margin: 0.3rem;
        padding: 0.5rem;
      }
    }
  }
}
</style>
